<template>
  <div>
    <div class="card1">
      <div style="width:100%;background-color:#f2f2f2;height:42px;">
        <span style="margin-left:20px;line-height:42px;">事件分析</span>
      </div>
    </div>
    <div class="index">
      <div>
        <span style="font-weight:600;">指标</span>
        <div class="detail">
          <span>按</span>
          <span>
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.event_code"
                :label="item.event_name"
                :value="item.event_code"
              ></el-option>
            </el-select>
          </span>
          <span>的</span>
          <span>
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </div>
        <el-divider></el-divider>
        <span style="font-weight:600;">细分维度</span>
        <div class="detail2" v-for="(options,index) in options3List" :key="index">
          <span>按</span>
          <span>
            <el-select v-model="value3List[index]" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
          <span>
            查看
            <i class="el-icon-plus" style="margin-left:4px;" @click="addOption"></i>
            <i class="el-icon-minus" style="margin-left:4px;" @click="removeOption"></i>
          </span>
        </div>
        <div style="text-align:right;">
          <el-button style="width:68px;background-color:#ff8b2f;color:#fff;border-radius:40px;" @click="eventAnalysis">查询</el-button>
        </div>
      </div>
    </div>
    <div style="margin:20px 0 0 0;padding:30px 40px 0 40px;background-color:#fff;height:560px">
      <div class="block" style="float:left;">
        <el-date-picker
          v-model="dateValue"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div style="float:right;">
        <el-radio-group v-model="radio" @change="changeTheme">
          <el-radio-button :label="1">
            <img :src="img4" style="width:12px;height:12px;" />
          </el-radio-button>
          <el-radio-button :label="2">
            <img :src="img5" style="width:12px;height:12px;" />
          </el-radio-button>
          <el-radio-button :label="3">
            <img :src="img6" style="width:12px;height:12px;" />
          </el-radio-button>
          <el-radio-button :label="4">
            <img :src="img7" style="width:12px;height:12px;" />
          </el-radio-button>
        </el-radio-group>
      </div>
      <div id="main" style="width: 1000px;height:400px;margin-top:10%;" />
    </div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "ReportContent",
  props: {},
  data() {
    return {
      //主题切换
      radio: 1,
      img4: require("@/assets/broken.png"),
      img5: require("@/assets/block.png"),
      img6: require("@/assets/bar.png"),
      img7: require("@/assets/pie.png"),
      options1: [],
      value1: "",
      options2: [
        {
          value: "人次",
          label: "总次数",
        },
        {
          value: "人数",
          label: "总人数",
        },
      ],
      value2: "人次",
      options3List: [],
      value3List: [],
      options3: [],
      value3: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dateValue: "",
      option: {
         //color: ["#48abfe", "#00d06e", "#3be294", "#ffdcba"],
         tooltip: {
           //trigger: "axis",
         },
        legend: {
          icon: "rect",
          itemWidth: 20,
          itemHeight: 6,
          bottom: "0%",
          data: [],
        },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "25%",
          containLabel: true,
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} ",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#DDD",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            show: true,
          },
        ],
        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 'auto',
              //show: true,
              splitNumber: 15,
              textStyle: {
                fontSize: 12,
                color: "#656565",
              },
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            data: [],
          },
        ],
        series: [
          
        ],
      },
      respdata:''
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getEventList();
    this.getAttributeList();
    this.initChart();
  },
  watch: {},
  methods: {
    eventAnalysis() {
      var params = {
            "eventCode":this.value1,
            "filterParameter":"["+this.value3List+"]",
            "countType":this.value2,
            "dataValue":"",
            "startDate":this.dateValue[0],
            "endDate":this.dateValue[1]
          }
          console.log(params);
      if(this.value1 && this.dateValue){
          this.$http.post("http://121.196.23.15:8080/userprofile-platform/v1/DataAnalysis/eventAnalysis",
          params
        ).then((res) => {
          if (res) {
            console.log(res.data);
            if(res.data.flag==true){
              this.respdata = res.data.data;
              this.changeTheme(this.radio);
            }
          }
        });
     }
    },
    getEventList() {
      this.$http
        .post(
          "http://121.196.23.15:8080/userprofile-platform/v1/DataAnalysis/eventList",
          {}
        )
        .then((res) => {
          if (res) {
            //console.log(res.data.data);
            this.options1 = res.data.data;
          }
        });
    },
    getAttributeList() {
      this.$http
        .post(
          "http://121.196.23.15:8080/userprofile-platform/v1/DataAnalysis/attributeList",
          {}
        )
        .then((res) => {
          if (res) {
            //console.log(res.data.data);
            {}
            var respdata = res.data.data;
            var option3=[];
            for(var i=0;i<respdata.length;i++){
              var val =JSON.stringify( {
                  type:respdata[i].property_type_code,
                  field:respdata[i].property_code,
                  name:respdata[i].property_name
              })
              option3.push({
                  value:val,
                  name:respdata[i].property_name
              });
            }
            
            this.options3 = option3;
            this.addOption();
            
          }
        });
    },
    addOption() {
      this.options3List.push(this.options3);
      this.value3List.push("");
    },
    removeOption() {
      if (this.options3List.length > 1) {
        this.options3List.pop();
        this.value3List.pop();
      }
    },
    handleClick() {
      alert("button click");
    },
    //切换主题
    changeTheme(val) {
      console.log(val);
      if(val==1){//折线图
        var detailData = this.respdata.detailList;
        var seriesData = [];
        var legendData = [];
        for(var i=0;i<detailData.length;i++){
          seriesData.push({
            name: detailData[i].legend,
            type: "line",
            data: detailData[i].value,
          });
          legendData.push(detailData[i].legend)
        }
        this.option.xAxis[0].data = this.respdata.dateList;
        this.option.xAxis[0].show=true;
        this.option.legend.data=legendData;
        this.option.series=seriesData;
      }else if(val==2){//面积图
        var detailData = this.respdata.detailList;
        var seriesData = [];
        var legendData = [];
        for(var i=0;i<detailData.length;i++){
          seriesData.push({
            name: detailData[i].legend,
            type: "line",
            areaStyle: { },
            data: detailData[i].value,
          });
          legendData.push(detailData[i].legend)
        }
        this.option.xAxis[0].data = this.respdata.dateList;
        this.option.xAxis[0].show=true;
        this.option.legend.data=legendData;
        this.option.series=seriesData;
      }else if(val==3){//柱形图
         var detailData = this.respdata.detailList;
        var seriesData = [];
        var xAxisData = [];
         var seriesData0 = [];
        for(var i=0;i<detailData.length;i++){
          xAxisData.push(detailData[i].legend);
          seriesData0.push(detailData[i].total)

        }
        seriesData.push({
            name: 'total',
            type: "bar",
            data: seriesData0,
        });
        this.option.xAxis[0].data = xAxisData;
        this.option.xAxis[0].show=true;
        this.option.legend.data=[];
        this.option.series=seriesData;
      }else if(val==4){//饼图
        var detailData = this.respdata.detailList;
        var seriesData = [];
        var legendData = [];
        var seriesData0 = [];
        for(var i=0;i<detailData.length;i++){
          legendData.push(detailData[i].legend);
          seriesData0.push({
            value:detailData[i].total,
            name:detailData[i].legend
          })
        }
        seriesData.push({
            name: 'total',
            type: "pie",
            radius: ['50%', '70%'],
            data: seriesData0,
        });
        this.option.xAxis[0].show=false;
        this.option.legend.data=[];
        this.option.series=seriesData;
      }
      this.chart.setOption(this.option,true);
    
    },
    initChart() {
      // 通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
      this.chart = echarts.init(document.getElementById("main"));
      // this.chart = echarts.init(this.$el)

      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option);
    },
    getRowClass({ rowIndex }) {
      if (rowIndex == 0) {
        return "background:RGB(254,242,234)";
      } else {
        return "";
      }
    },
  },
  destroyed() {},
};
</script>

<style scoped>
.card1 {
  text-align: left;
  font-size: 18px;
}

.index {
  min-height: 200px;
  padding: 20px;
  background-color: #fff;
  color: #303133;
  text-align: left;
}
.detail {
  padding: 10px 0;
}
.detail2 {
  padding: 10px 0 0 0;
}
.el-divider--horizontal {
  margin: 0;
  margin-bottom: 20px;
}
.card {
  padding: 30px 20px 20px 20px;
  background-color: #fff;
  color: #303133;
  text-align: left;
  font-size: 18px;
  border-right: 1px solid #f7f8fa;
}
.imgr {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  float: right;
  margin-top: 3px;
}
</style>
